import React, { useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { NavBar, Space, Toast } from "antd-mobile";
import axios from "axios";
import { InfiniteScroll, List } from 'antd-mobile'
function Index() {
  let nav = useNavigate();
  let [shu] = useSearchParams();
  let start = shu.get("start");
  let end = shu.get("end");
  let [list, setList] = useState([]);
  let [page,setPage]=useState(1)
  let getData = async () => {
    let res = await axios.get("/api/trip/airplane", {
      params: {
        start,
        end,
      },
    });
    console.log(res.data.data);
    setList([...list, ...res.data.data]);
    setPage([page+1])
  };
  const xing=()=>{
    // nav(`/detail?start=${start}&end=${end}`,{state:item})
   nav('/detail')
  }
  useEffect(() => {
    getData();
  }, []);
  return (
    <div>
      <NavBar onBack={() => nav("/")}>
        <span>{start}</span>
        <span>→</span>
        <span>{end}</span>
      </NavBar>

      <div >
        {list.length>0 &&
          list.map((item, index) => (
            <div key={index} className="nm" onClick={()=>xing()}>
              <div>
              <p>{item.dst}</p><br />
              <p>{item.dasn}</p>
              </div>
              <div>
                d3212 <br />
              1h 12KM
              </div>
             <div>
             <p>{item.ast}</p>
             <p>{item.aasn}</p>
             </div>
             
            </div>
          ))}
      </div>
      <InfiniteScroll loadMore={getData} hasMore={true} />
    </div>
  );
}

export default Index;
